<style lang="less">
.add-user-drawer {
  .have-tips {
    margin-bottom: 10px;
    .arco-form-item-content {
      // position: relative;
      flex-direction: column;
      align-items: flex-start;
      .input__tip {
        // position: absolute;
        // bottom: 0;
        color: #bfbfbf;
        font-size: 12px;
        margin-top: 7px;
      }
    }
  }
}
.area-code-drown-menu {
  width: 354px;
}
</style>

<template>
  <a-drawer
    class="add-user-drawer"
    :width="480"
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleOk"
    unmountOnClose
  >
    <template #title> 新增用户 </template>
    <a-form :model="form" label-align="left" ref="formRef" :rules="formRules">
      <a-form-item field="nickname" label="昵称" :validate-trigger="['blur']">
        <a-input v-model="form.nickname" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="mobPhone" label="手机号" :validate-trigger="['blur']">
        <a-input v-model="form.mobPhone" placeholder="请输入">
          <template #prepend>
            <a-select
              :style="{ width: '85px' }"
              v-model="form.areaCode"
              :trigger-props="{
                contentClass: 'area-code-drown-menu',
              }"
            >
              <a-option
                v-for="it in areaCode"
                :key="it"
                :value="it[2]"
                :label="`+${it[2]}`"
                >{{ `${it[0]} +${it[2]}` }}</a-option
              >
            </a-select>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        field="password"
        label="密码"
        class="have-tips"
        :validate-trigger="['blur']"
      >
        <a-input-password v-model="form.password" placeholder="请输入" />
        <p class="input__tip">6-10位字符串，字母、数字、英文符号至少包含两种</p>
      </a-form-item>
      <a-form-item
        field="confirmPassword"
        label="确认密码"
        :validate-trigger="['blur']"
      >
        <a-input-password v-model="form.confirmPassword" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, withDefaults, defineEmits } from "vue";
import areaCode from "ourwill-feutil/common/areaCode";
import { Message } from "@arco-design/web-vue";
import { user } from "@/api";
interface PropsType {
  visible: boolean;
}
interface EmitType {
  (e: "changeAddUserDrawerVisible", v: boolean): void;
  (e: 'refreshList'): void
}

const props = withDefaults(defineProps<PropsType>(), {
  visible: false,
});
const emit = defineEmits<EmitType>();

const handleCancel = () => {
  emit("changeAddUserDrawerVisible", false);
};
const handleOk = () => {
  formRef.value.validate((error: object | undefined) => {
    if (!error) {
      emit("changeAddUserDrawerVisible", false);
      addUser();
    }
  });
};
const addUser = async () => {
  const body = {
    ...form,
  };
  body.areaCode = `+${body.areaCode}`;
  const { ok, data } = await user.addUser(body);
  if (!ok) return;
  Message.success(data.msg);
  emit('refreshList');
};

const formRef = ref();
const form = reactive({
  nickname: "",
  mobPhone: "",
  password: "",
  confirmPassword: "",
  areaCode: "86",
});
const nickNameValid = (v: string, cb: Function) => {
  if (!v) {
    return cb("请输入昵称");
  } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5\s]{1,16}$/.test(v)) {
    return cb("请输入16位字符以内的昵称");
  } else {
    cb();
  }
};
const mobPhoneValid = (v: string, cb: Function) => {
  if (!v) {
    return cb("请输入手机号");
  } else if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(v)
  ) {
    return cb("请输入正确的手机号");
  } else {
    cb();
  }
};
const passwordValid = (v: string, cb: Function) => {
  if (!v) {
    return cb("请输入密码");
  } else if (!/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/.test(v)) {
    return cb("请输入正确的密码");
  } else {
    cb();
  }
};
const confirmPasswordValid = (v: string, cb: Function) => {
  if (!v) {
    return cb("请确认密码");
  } else if (v !== form.password) {
    return cb("输入的两次密码不同");
  } else {
    cb();
  }
};
const formRules = {
  nickname: [{ validator: nickNameValid }],
  mobPhone: [{ validator: mobPhoneValid }],
  password: [{ validator: passwordValid }],
  confirmPassword: [{ validator: confirmPasswordValid }],
};
</script>
